<template>
  <div class="api-manager">
    <div class="line">
    </div>
    <el-row>
      <el-col :span="5">
        <div>
          <group></group>
        </div>
      </el-col>
      <el-col :span="19">
        <div class="api-manager-info">

          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="预览" name="first">
              <apiInfo></apiInfo>
            </el-tab-pane>
            <el-tab-pane label="编辑" name="second">
              <apiEdit></apiEdit>
            </el-tab-pane>
            <el-tab-pane label="接口调试" name="third">
              <apiDebug></apiDebug>
            </el-tab-pane>
            <el-tab-pane label="接口mock" name="fourth">
              <apiMock></apiMock>
            </el-tab-pane>
          </el-tabs>

        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import group from './group.vue'
import apiInfo from './components/apiIfno.vue'
import apiEdit from './components/apiEdit.vue'
import apiDebug from './components/apiDebug.vue'
import apiMock from './components/apiMock.vue'
export default {
  data () {
    return {

      activeName: 'first',

    }
  },





  components: {
    group,
    apiInfo,
    apiEdit,
    apiDebug,
    apiMock

  }
}
</script>

<style scoped>
.api-manager {
}

.api-manager-info {
  padding-left: 10px;
}

.api-manager .line {
  border-bottom: 1px solid #eee;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}
</style>